<script lang="ts">
  import { onLoad } from '@/hooks/uniapp-composition-hooks';
  import { computed, defineComponent, ref } from '@vue/composition-api';
  import OtoInput from '@/components/common/oto-input.vue';
  import { createInvitationCode, matchUserByInvitationCode } from '@/api/study-match';
  import { Message } from '@/libs';
  import { useRouter } from '@/constants/router';
  import { STORAGE_KEY, useStorage } from '@/hooks/storage.hoos';

  export default defineComponent({
    components: {
      OtoInput
    },
    setup() {
      const router = useRouter();
      const [code, setCode] = useStorage<string>(STORAGE_KEY.INVITATION_CODE);
      function getCodeInCache() {
        const cacheCode = code.value;
        if (cacheCode) {
          const result = cacheCode.split(',');
          const realCode = result[0];
          const time = Number(result[1]);
          // 缓存十分钟
          const nowTime = +new Date();
          const timeLen = 1000 * 60 * 10;
          if (nowTime - time < timeLen) {
            return realCode;
          } else {
            return '';
          }
        }
        return '';
      }

      function setCodeInCache(code: string) {
        const nowDate = +new Date();
        setCode(`${code},${nowDate}`);
      }
      const showType = ref(1);
      const form = ref({
        code: ''
      });
      onLoad((options) => {
        showType.value = Number(options?.type) || 0;
        if (showType.value === 1) {
          return;
        }
        form.value.code = getCodeInCache();
        if (showType.value === 2 && !getCodeInCache()) {
          createInvitationCode().then((res) => {
            if (res.data) {
              setCodeInCache(res.data.code);
              form.value.code = getCodeInCache();
            }
          });
        }
      });

      const text = computed(() => {
        return showType.value === 1 ? '别人的' : '我的';
      });

      function copy() {
        uni.setClipboardData({
          data: form.value.code, //要被复制的内容
          success: () => {
            uni.showToast({
              title: '复制成功'
            });
          }
        });
      }

      function submit() {
        matchUserByInvitationCode(form.value.code).then(async (res) => {
          console.log(res);
          await Message.success('提交成功', {
            duration: 1000
          });

          router.navigateBack({
            delta: 1
          });
        });
      }

      return {
        showType,
        form,
        text,
        copy,
        submit
      };
    }
  });
</script>

<template>
  <view class="invitation-code">
    <view class="title">{{ text }}邀请码：</view>
    <view class="code">
      <oto-input :disabled="showType === 2" v-model="form.code" />
      <view class="tips" v-if="showType === 2">10分钟内生效,请尽快使用</view>
    </view>

    <view class="content-bottom" v-if="showType === 2">
      <button class="bottom-test-button" @click.stop="copy">点击复制</button>
      <button open-type="share" class="bottom-test-button" @click.stop="share">点击分享</button>
    </view>
    <view class="content-bottom" v-if="showType === 1">
      <button class="bottom-test-button" @click.stop="submit">确定</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .invitation-code {
    .title {
      margin-top: 200rpx;
      margin-left: 50rpx;
      font-size: 38rpx;
    }
    .code {
      margin-top: 40rpx;
      padding: 0 50rpx 0 40rpx;
      height: 9vh;
      width: 100%;
      border-bottom: 3rpx solid rgb(238, 238, 238);
    }

    .tips {
      margin-top: 20rpx;
    }
    .content-bottom {
      margin-top: 40rpx;
      display: flex;
      justify-content: space-between;
      .bottom-test-button {
        width: 45%;
        background-color: #fff;
        margin-bottom: 2vw;
        font-size: 4vw;
        color: #383838;
        box-shadow: 2rpx 2rpx 25rpx #ececec;
      }
    }
  }
</style>
